<template>
  <div class="root">
    <template v-for="item in dragData">
      <draggable
        :key="item.id"
        class="draggable-plugin"
        :data="item"
        @dragstart="onSourceDragStart"
        @dragsend="onSourceDragEnd"
      >
        <div class="drag-content">{{ item.name }}</div>
      </draggable>
    </template>
    <br />
    <template v-for="item in dragData">
      <droppable
        :key="item.id+'key'"
        class="drop-box"
        :expand="{key:'dropPlugin'+item.id}"
        @dragstart="onDragStart"
        @dragend="onDragEnd"
        @drop="onDrop"
        @dragenter="onDragEnter"
        @dragover="onDragOver"
        @dragleave="onDragLeave"
      >
        <div>{{ dropPlugin[item.meth] }}</div>
      </droppable>
    </template>
  </div>
</template>

<script>
// Demo，用于展示拖拽功能实现的组件
import Draggable from './draggable';
import Droppable from './droppable';

export default {
  components: {
    Draggable,
    Droppable
  },
  data() {
    return {
      dragData: [
        { name: '标签1', id: '1', meth: 'dropPlugin1' },
        { name: '标签2', id: '2', meth: 'dropPlugin2' },
        { name: '标签3', id: '3', meth: 'dropPlugin3' },
        { name: '标签4', id: '4', meth: 'dropPlugin4' }
      ],
      dropPlugin: {}
    };
  },
  methods: {
    onSourceDragStart(params) {
      console.log('被拖动元素监听到拖动开始');
    },

    onSourceDragEnd(params) {
      console.log('被拖动元素监听到拖动结束');
    },

    onDragStart(params) {
      console.log('监听到拖动开始');
    },
    onDragEnd(params) {
      console.log('监听到拖动结束');
    },
    onDrop(params) {
      this.dropPlugin[params.expand.key] = params.data;
      this.dropPlugin = { ...this.dropPlugin };
    },
    onDragEnter(params) {
      console.log('监听到被拖动元素进入当前范围');
    },
    onDragOver(params) {
      // console.log('监听到被拖动元素在上方移动, 这个调用调多次就不打印了')
    },
    onDragLeave(params) {
      console.log('监听到被拖动元素离开当前范围');
    }
  }
};
</script>

<style lang="scss">
.draggable-plugin{
  width: 100px;
  height: 50px;
  background: red;
  display: inline-block;
  margin-right: 20px;
}
.drop-box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 20px;
  background: #ddd;
}
</style>
